<%@ page language="java"  contentType="text/html; charset=utf-8"%>
<%@ include file="../taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<!-- Page title -->
		<title>Spring Boot Web Demo</title>
        <link rel="icon" href="${img}/placer.png">
		<script type="text/javascript" src="${js}/jquery-1.8.0.min.js"></script>
		<script>
		
		$(document).ready(function(){
		  if (window.parent != window){
		     console.warn(window.parent+"=="+window);
		     window.top.location.href = location.href;
		  }
		});
		</script>
		<style>
		 *{
		   margin:0;
		   padding:0;
		   
		 } 
		 .logo{
		     width:100%; 
		     height:80px;
		     text-align:center;
		     border-bottom:1px solid #95B8E7; 
		     align:center;
		 } 
		 #title{
		      height:50px;
		      font-size:30px;
		      line-height:50px;
			  color: #fff;
			  text-shadow:1px 1px rgba(197, 223, 248,0.8),
						  2px 2px rgba(197, 223, 248,0.8),
						  3px 3px rgba(197, 223, 248,0.8);
			   
		 }
		 #login_btn{
		    height:44px;
		    width:70px;
		    border-radius:5px;
		    cursor: pointer;
		    font-weight:bold;
		    font-size:16px;
		    color:rgb(0,90,148);
		    text-shadow:1px 1px 1px #95B8E7;
		    box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);

		 }
		 .font-logo{
		   line-height:30px;
		   font-weight:bold;
		   font-size:20px;
		   color:#ffffff;
		   text-shadow:1px 1px 1px #95B8E7;
		 }
		 #footer{
		   width:100%; 
		   left:0px;
		   height:40px;
		   position:fixed; 
		   bottom:0px;
		   text-align:center;
		   border-top:1px solid #95B8E7;
             color:rgb(0,90,148);           
		 }
		 input,label { 
		    vertical-align:middle;
		    font-size:14px;
		    color:rgb(0,90,148);
		 }
		.login{
		    width: 360px;
		    margin: 0 auto;
		    padding: 20px 20px 20px;
		    background: #5799BE;
		    border-radius: 3px;
		    -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
		    box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
		    
		}
		.login h1 {
		    margin: -20px -20px 21px;
		    line-height: 40px;
		    font-size: 15px;
		    font-weight: bold;
		    color: #555;
		    text-align: center;
		    text-shadow: 0 1px white;
		    background: #f3f3f3;
		    border-bottom: 1px solid #cfcfcf;
		    border-radius: 3px 3px 0 0;
		    background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
		    background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
		    background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
		    background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
		    -webkit-box-shadow: 0 1px whitesmoke;
		    box-shadow: 0 1px whitesmoke;
		}
		input[type=text], input[type=password] {
		    margin: 5px;
		    padding: 0 10px;
		    width: 290px;
		    height: 34px;
		    color: #404040;
		    background: white;
		    border: 1px solid;
		    border-color: #c4c4c4 #d1d1d1 #d4d4d4;
		    border-radius: 2px;
		    outline: 5px solid #eff4f7;
		    -moz-outline-radius: 3px;
		    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
		    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
		}
		input[type=text]:focus, input[type=password]:focus {
		   border-color: #7dc9e2;
		   outline-color: #dceefc;
		   outline-offset: 0;
		 }
		.mainImg{
		 	border-radius: 10px;
		    -webkit-box-shadow: 0 0 100px rgba(255, 255, 255, 0.5), 0 1px 12px rgba(0, 0, 0, 0.3);
		    box-shadow: 0 0 100px rgba(255, 255, 255, 0.5), 0 1px 12px rgba(0, 0, 0, 0.3);
		    border: 5px solid #ddd;
	        padding: 5px;
	        background: #fff;
		}

		</style>

		<style type="text/css">
        *{ margin: 0; padding: 0; text-decoration: none;}

        #container { width: 500px; height: 300px;  border: 3px solid #333;overflow: hidden; position: relative;
            border-radius: 3px;
		    -webkit-box-shadow: 0 0 100px rgba(255, 255, 255, 0.5), 0 1px 12px rgba(0, 0, 0, 0.3);
		    box-shadow: 0 0 100px rgba(255, 255, 255, 0.5), 0 1px 12px rgba(0, 0, 0, 0.3);
		    border: 5px solid #ddd;
	        background: #fff;
        
        }
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 200px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 130px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>
  
	</head>
	<body style="background:#226491;overflow-x:hidden">
    <div class="logo header" style="width:100%">
		 <p id="title">Spring Boot Web Demo</p>
	</div>
    <div style="width:100%;height:calc(100% - 120px)">
	    <img src="${img}/dot.gif" style="position:relative; top:160px; left:9%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:800px; left:50%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:50px;left:90%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:650px;left:50%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:800px;right:20%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:960px; left:9%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:10px;left:27%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:250px;left:89%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:820px;right:10%"/>
        <img src="${img}/dot.gif" style="position:relative; top:800px; left:20%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:50px;left:8%"/>
	    <img src="${img}/dot.gif" style="position:relative; top:650px;left:5%"/>
	    
		<div class="middle" style="width:100%;margin-top:35px;margin-bottom:35px;">   
			 <div class="login" style="float: right;margin-right:400px;margin-top:100px;">
				    <h1>web demo</h1>
				    <form action="" method="post" style="width: 300px;margin:0 auto;">
					   
						<p for="login-username" class="font-logo" style="margin:20px 0 0 ">
						   <input id="login-username" type="text" name="username" placeholder="用户名"  maxlength="20" /> 
						</p>
			
						<p for="login-psw" class="font-logo" style="margin:20px 0 0 ">
						    <input id="login-psw" type="password" name="password" placeholder="密码"  maxlength="18"  />
						</p>
						
                        <p class="font-logo" style="margin:20px 0 0 ">
						    <input type="button" id="login_btn" value="登录" style="width:300px;background:#E0ECFF" onclick="loginCheck();"/>
						</p>	
				    </form>
			</div>			
		</div>	    
	</div>
    <div id="footer" >
		<p style="font-size:12px;color:#ffffff;text-align:center;margin:1em" >Copyright@Wuhan Navigation and LBS,Inc.All rights reserved.</p>
	</div>
    <script>
          function  loginCheck(){
        	  var username = $('#login-username').val();
        	  var password = $('#login-psw').val();
        	  $.ajax({
                  type: "POST",
                  dataType: "json",  //返回json格式的数据
                  url: "ajax/login",//要访问的后台地址
                  data: { 'username' : username, 'password': password},    //要发送的数据                 
                  success: function(msg){ //msg为返回的数据，在这里做数据绑定
                      if(msg.RET_CODE=='SUCCESS'){
                    	  window.location.href= "welcome?name="+username+"&loginId="+msg.LOGIN_ID;
                      }
                      else{
                    	  alert(msg.RET_MSG);
                      }
                  }   
        	  });
       }
    </script>
     
  </body>
</html>